<template>
	<van-cell-group>
		<!-- 联系人卡片 -->
<van-contact-card
  add-text="添加订单收获地址"
  :type="cardType"
  :name="currentContact.name"
  :tel="currentContact.tel"
  @click="showList = true"
/>

<!-- 联系人列表 -->
<van-popup v-model="showList" position="bottom" style="height: 300px;overflow-y: auto;" >
  <van-address-list
  v-model="chosenContactId"
  :list="list"
  @add="onAdd"
  @edit="onEdit"
  @select="onSelect"
/>
</van-popup>

<!-- 联系人编辑 -->
<van-popup v-model="showEdit" position="bottom">
  <van-address-edit
  show-set-default
  :area-list="areaList"
 
  :address-info="editingContact"
  :search-result="searchResult"
  @save="onSave"
  @delete="onDelete"
 
/>
</van-popup>
	</van-cell-group>
</template>

<script>
	import { Checkbox,ContactCard, ContactList, ContactEdit } from 'vant';
	import areaList from './common/area';

	export default {
	name: 'top-user-info',
		data() {
    return {
      
      areaList,
      searchResult: [],
      chosenContactId: null,
      editingContact: {},

      showList: false,
      showEdit: false,
      isEdit: false,
      list: []
    };
  },
  mounted(){
      this.$http
          .get(`/users/address`)
          .then(res => { 
            if (res.code == 200) {
              var addresslist=[];
              for (var i = 0; i < res.result.length; i++){
                var addobj = res.result[i];
                if(addobj.isDefault == 1){
                this.chosenContactId = addobj.id;
                 localStorage.setItem("chosenContactId",this.chosenContactId);
                }
                addresslist.push({
                  id:addobj.id,
                  province:addobj.province,
                  city:addobj.city,
                  county:addobj.town,
                  name:addobj.contact,
                  tel:addobj.phone,
                  is_default:addobj.isDefault == 1 ? true : false,
                  address_detail:addobj.endAddress,
                  address:addobj.province + addobj.city + addobj.town + addobj.endAddress,
                  area_code:addobj.areaCode 
                })
                
              }
               this.list = addresslist;                  
            } else {
              this.$router.replace('/404')
            }
          })
          .catch(function(error) {});
    },
  computed: {
    cardType() {
      return this.chosenContactId !== null ? 'edit' : 'add';
    },

    currentContact() {
      const id = this.chosenContactId;

      return id !== null ? this.list.filter(item => item.id === id)[0] : {};
    }
  },

  methods: {
    // 添加联系人
    onAdd() {
      this.editingContact = { };
      this.isEdit = false;
     
      this.showEdit = true;
    },

    // 编辑联系人
    onEdit(item) {
      this.isEdit = true;      
      this.showEdit = true;
      this.editingContact = item;

    },

    // 选中联系人
    onSelect() {
      this.showList = false;
      console.log(this.chosenContactId)
    },

    // 保存联系人
    onSave(info) {
      console.log(info);
      this.showEdit = false;
      this.showList = false;
      info.address=info.province + info.city + info.county + info.address_detail;
      var addressobj;
      if (this.isEdit) {
        this.list = this.list.map(item => item.id === info.id ? info : item);
        addressobj = {
          status:info.is_default ? 1 :0,
          id:info.id,
          province:info.province,
          city:info.city,
          town:info.county,
          contact:info.name,
          phone:info.tel,
          isDefault:info.is_default,
          endAddress:info.address_detail,
          areaCode:info.area_code
          }
      } else {
        this.list.push(info);
        addressobj = {
          province:info.province,
          city:info.city,
          town:info.county,
          contact:info.name,
          phone:info.tel,
          isDefault:info.is_default,
          endAddress:info.address_detail,
          areaCode:info.area_code
          }
      }
      this.chosenContactId = info.id;
      localStorage.setItem("chosenContactId",this.chosenContactId);
      this.$http
          .post(`/users/saveaddress`,addressobj)
          .then(res => {
            if (res.code == 200) {
                                             
            } else {
              this.$router.replace('/404')
            }
          })
          .catch(function(error) {});
    },

    // 删除联系人
    onDelete(info) {
      this.showEdit = false;
      this.list = this.list.filter(item => item.id !== info.id);
      if (this.chosenContactId === info.id) {
        this.chosenContactId = null;
        localStorage.removeItem("chosenContactId");
      };
       this.$http
          .post(`/users/saveaddress`,{
          id:info.id,
          status:-1
          })
          .then(res => {
            if (res.code == 200) {
                                             
            } else {
              this.$router.replace('/404')
            }
          })
          .catch(function(error) {});

    },
    
  }
	}
</script>
<style lang="scss">
	
</style>